<script>
    import {onMount} from "svelte";

    export let cards = [];
    export let mode = 'grid';
    import Card from './Card.svelte';

    // 记录当前选中的卡牌索引
    let selectedIndex = -1;
    let getCardStyle;
    onMount(
        () => {
            getCardStyle = (index, total) => {
                if (mode !== 'hand') return '';

                const maxAngle = 20;
                const cardWidth = 200;
                const totalWidth = cardWidth * total;
                const spacing = Math.min(30, (window.innerWidth - 100 - totalWidth) / total);

                // 计算中心点
                const centerIndex = (total - 1) / 2;
                const angle = ((index - centerIndex) * (maxAngle / total));

                // 基础位置计算
                const x = (index - centerIndex) * (cardWidth + spacing);

                // 弧形高度计算
                const normalizedPosition = (index - centerIndex) / (total / 2);
                const y = 100 * (normalizedPosition * normalizedPosition); // 负值使弧形向上

                // 选中效果
                if (index === selectedIndex) {
                    return `
                transform: translate(${x}px, ${y - 50}px) rotate(0deg);
                z-index: 100;
            `;
                }

                return `
            transform: translate(${x}px, ${y}px) rotate(${angle}deg);
            z-index: ${50 - Math.abs(index - centerIndex)};
        `;
            }
        }
    )



    function handleCardClick(index) {
        if (mode === 'hand') {
            selectedIndex = selectedIndex === index ? -1 : index;
        }
    }
</script>

{#if getCardStyle}
    <div class="cards-container" class:hand-mode={mode === 'hand'}>
        {#each cards as card, i}
            <div
                    class="card-wrapper"
                    class:selected={selectedIndex === i}
                    style={getCardStyle(i, cards.length)}
                    on:click={() => handleCardClick(i)}
            >
                <Card {...card}/>
            </div>
        {/each}
    </div>
{/if}

<style>
    .cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        justify-content: center;
        align-items: flex-start;
        min-height: 400px;
    }

    .hand-mode {
        flex-wrap: nowrap;
        gap: 0;
        height: 400px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000px;
        display: flex;
        justify-content: center;
        align-items: flex-end; /* 改为flex-end以便于向上弧形展示 */
        overflow: visible;
    }

    .hand-mode .card-wrapper {
        position: absolute;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: bottom center;
        cursor: pointer;
    }

    .hand-mode .card-wrapper.selected {
        transform: translateY(-80px) scale(1.1) rotate(0deg) !important;
        z-index: 100 !important;
    }

    .hand-mode .card-wrapper:not(.selected) {
        filter: brightness(0.85);
    }

    @media (max-width: 768px) {
        .cards-container {
            gap: 15px;
            padding: 15px;
        }

        .hand-mode {
            height: 300px;
        }
    }
</style> 